<template>
  <section>
    <div class="model retrieval">
      <img :src="IMGBASE64.JIANSUOGUANLI2X" class="orange">
      <span class="title">检索管理</span>
      <div class="body">
        <span>学期:</span>
        <select class="select" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option></option>
        </select>
        <span>月份:</span>
        <select class="select" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option></option>
        </select>
        <input type="text" class="text" v-model="studentName" placeholder="请输入学生名称">
        <el-button type="primary" size="small">确定</el-button>
        <el-button type="primary" size="small">导出</el-button>
        <div class="right">
        </div>
      </div>
    </div>
    <div class="model management">
      <img :src="IMGBASE64.JIFENDENGJI2X" class="pink">
    	<span class="title">类别设置</span>
    	<div class="kong"></div>
    	<template>
    		<el-table :data="tablemsg" style="width: 100%">
    			<el-table-column prop="id" label="#" align="center"></el-table-column>
    			<el-table-column prop="bname" label="名称" align="center"></el-table-column>
    			<el-table-column prop="type" label="年级" align="center"></el-table-column>
    			<el-table-column prop="fraction" label="月份" align="center"></el-table-column>
    			<el-table-column prop="raters" label="学期积分" align="center"></el-table-column>
          <el-table-column prop="raters" label="月度积分" align="center"></el-table-column>
          <el-table-column prop="raters" label="月度排行" align="center"></el-table-column>
    		</el-table>
    	</template>
    </div>

    <div class="up" v-show="upShow">
      <img :src="IMGBASE64.GREENXINZENG2X" class="green">
      <span class="title">新增教师</span>
      <el-button icon="close" class="close" @click="upshow()"></el-button>
      <div class="header">
        <span class="title">基本信息</span>
      </div>
      <div class="kong1"></div>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="部门">
        <input type="text" class="text" v-model="form.name">
        </el-form-item>
        <el-form-item label="评分人">
          <input type="text" class="text" v-model="form.phone">
        </el-form-item>
        <el-form-item label="评分类别">
          <el-col :span="13">
	          <el-input v-model="form.id" size="small"></el-input>
          </el-col>
          <el-col :span="11">
            <el-input-number v-model="num1" :min="1" :max="10" size="small"></el-input-number>
          </el-col>
        </el-form-item>
      </el-form>
      <el-col :span="24">
        <div class="bottom">
          <div class="left">
            <el-checkbox v-model="checked">继续新建</el-checkbox>
          </div>
          <div class="right">
            <el-button type="success">确定</el-button>
            <el-button @click="upshow">取消</el-button>
          </div>
        </div>
      </el-col>
    </div>

    <transition name="modal-shadow">
      <div class="modal-backdrop" v-show="isSuccess"></div>
    </transition>
  </section>
</template>

<script>
export default {
  data () {
    return {
      studentName: null,
      checked: false,
      upShow: false,
      isSuccess: false,
      num1: '3',
      form: {
        name: null,
        phone: null,
        id: null,
        grade: null,
        grademsg: [{
          value: '一年级'
        },
        {
          value: '二年级'
        }],
        subject: null,
        subjectmsg: [{
          value: '数学'
        },
        {
          value: '语文'
        }],
        identity: null,
        identitymsg: [{
          value: '刺客'
        },
        {
          value: '战士'
        },
        {
          value: '魔法师'
        },
        {
          value: '道士'
        }],
        address: null
      },
      tablemsg: [
        {
          id: '1',
          bname: '教研处',
          type: '资料上传',
          fraction: '1',
          raters: '欧阳俊逸'
        },
        {
          id: '2',
          bname: '教研处',
          type: '资料上传',
          fraction: '1',
          raters: '欧阳俊逸'
        },
        {
          id: '3',
          bname: '教研处',
          type: '资料上传',
          fraction: '1',
          raters: '欧阳俊逸'
        }
      ]
    }
  },
  mounted () {
  },
  methods: {
    handleClick () {
      console.log('1')
    },
    upshow () {
      this.upShow = !this.upShow
      this.isSuccess = !this.isSuccess
    },
    haha () {
      alert('haha')
    }
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
  .kong1{
    padding: 9px;
  }
  .retrieval{
    .body{
      span{
      	margin-left: 4%;
      }
      span:first-child{
      	margin-left: 0;
      }
      .select{
        width: 13%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
      }
      .text{
        border: 0;
        border-bottom: 1px solid #d7d7d7;
        margin-left: 4%;
      }
      .right{
        width: 10%;
        float: right;
				&-text{
					width: 58%;
					border: 0;
					border-bottom: 1px solid #D7D7D7;
				}
				.search{
					background: #00A0E8;
					border: 0;
					border-radius: 2px;
					color: #fff;
					padding: 5px 15px;
				}
      }
    }
  }

  .close{
    position: absolute;
    right: 2%;
  }
  .modal-backdrop{
    background: #000;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    opacity: .5;
  }
  .up{
    width: 40%;
    position: fixed;
    top: 50px;
    left: 50%;
    margin-left: -20%;
    background: #FFF;
    border-radius: 5px;
    padding: 20px 20px 0 20px;
    z-index: 3;
    .green{
      position: absolute;
      left: 24px;
      top: -25px;
    }
    .title{
      margin-left: 96px;
    }
    .text{
      width: 70%;
      border: 0;
      border-bottom: 1px solid #D7D7D7;
    }
    .header{
      border-bottom: 2px solid #D7D7D7;
      padding: 30px 0 10px 0 !important;
      margin-left: 3%;
      margin-bottom: 10px;
      .title{
        color: #FB7862;
        border-bottom: 2px solid #FB7862;
        padding: 0 0 10px 0 !important;
        margin-left: 0;
        padding-bottom: 10px !important;
      }
    }
    .form{
      width: 80%;
      margin-left: 3%;
    }
    .bottom{
      border-top: 1px solid #D7D7D7;
      margin-top: 20px;
      background: #F8F8F8;
      padding: 8px 0;
      margin-left: -20px;
      margin-right: -20px;
      border-radius: 0 0 5px 5px;
      .left{
        width: 50%;
        display: inline-block;
        margin-left: 2%;
      }
      .right{
        width: 43%;
        display: inline-block;
        text-align: right;
      }
    }
  }
</style>
